<template>
	<view class="home-box">
		<!-- 轮播图 -->
		<view class="home-banner-box">
			<swiper class="swiper" 
			:indicator-dots="true" 
			:autoplay="true" 
			:interval="4000" 
			:duration="1000" 
			indicator-active-color="#fff" 
			indicator-color="#FFFFFF80" 
			circular>
				<swiper-item v-for="item in bannerList" :key="item.id" @tap="showBannerAction(item)">
					<view class="swiper-item-box">
						<image class="swiper-item-img" :src="item.imgPath" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 菜单 -->
		<view class="menu-box">
			<view class="menu-item"
			 v-for="item in homeMenus"
			  :key="item.type"
			  @tap="showMenuTypeAction(item.type)">
				<image class="menu-item-icon" :src="item.icon" mode="aspectFit"></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- 广告 -->
		<view class="home-advert-box">
			<swiper class="swiper-advert" 
			:indicator-dots="true" 
			:autoplay="true" 
			:interval="4000" 
			:duration="1000" 
			indicator-active-color="#fff" 
			indicator-color="#FFFFFF80" 
			circular>
				<swiper-item v-for="item in activityList" :key="item.id" @tap="showActivityAction(item)">
					<image class="swiper-advert-item-img" src="/static/advert_img.png" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
	import { onLoad , onShow ,onReady } from '@dcloudio/uni-app'
	import { homeMenus } from '@/config/data.js'
	import { getBannerList,getActivityList,searchLimitAuthResult } from '@/config/api.js'
	import { useUserStore } from '@/stores'
import { ref } from 'vue';
	const userStore = useUserStore()
	//页面生命周期
	onLoad( ()=>{
		console.log('页面加载')
	})
	//页面显示
	onShow( async ()=>{
		console.log('页面显示')
		await userStore.updateUserInfo()
		getHomeBannerData()
		getHomeActivityData()
		if(userStore.showAuth){
			uni.$auth.isBindDevice()
			userStore.showAuth = false
		}
	})
	///选择功能菜单
	const showMenuTypeAction = (type)=>{
		console.log(type)
		if (type == 1){
			if(uni.$auth.isBindDevice()){
				uni.navigateTo({
					url:'/pages/home/device-list/device-list'
				})
			}
		}
		else if (type == 2){
			if(uni.$auth.isAuth()){
				uni.navigateTo({
					url:'/pages/home/bankcard-list/bankcard-list'
				})
			}
		}
		else if (type == 3){
			if(uni.$auth.isAuth()){
				searchLimitAuthResult().then(res=>{
					const list = res.result
					if(!uni.$u.test.isEmpty(list)){
						uni.$u.route({
							url:'/pages/home/deduction-cert/deduction-cert-result',
							params:list[0]
						})
					}
					else{
						uni.navigateTo({
							url:'/pages/home/deduction-cert/deduction-cert'
						})
					}
				}).catch(err=>{})
			}
		}
		else if (type == 4){
			if(uni.$auth.isAuth()){
				uni.navigateTo({
					url:'/pages/home/quota-rate/quota-rate'
				})
			}
		}
		else{
			
		}
	}
	//广告数据
	const bannerList = ref([])
	//获取首页广告数据
	const getHomeBannerData = ()=>{
		getBannerList({"appName":"会开店"}).then(res=>{
			bannerList.value = res.result
		}).catch(err=>{
			
		})
	}
	//活动数据
	const activityList = ref([])
	//获取首页活动数据
	const getHomeActivityData = ()=>{
		getActivityList().then(res=>{
			if(res.result.length > 0){
				activityList.value = res.result
			}
			else{
				activityList.value = [{
					imgUrl:'/static/advert_img.png',
					id:0
				}]
			}
			
		}).catch(err=>{
			
		})
	}
	//banner跳转
	const showBannerAction = (item)=>{
		console.log(item)
		if(item.link.startsWith('http')){
			uni.$u.route({
				url:'/pages/webview/webview',
				params:{
					title:item.advertTitle,
					url:item.link
				}
			})
		}
	}
	//活动跳转
	const showActivityAction = (item)=>{
		if(item.id != 0 && item.activityAddress.startsWith('http')){
			uni.$u.route({
				url:'/pages/activity-web/activity-web',
				params:item
			})
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: white;
	}
	.home-box {
		box-sizing: border-box;
		.home-banner-box {
			margin: 30rpx 0;
			overflow: hidden;
			.swiper {
				background-color: white;
				height: 330rpx;
				.swiper-item-box {
					padding: 0 30rpx;
					width: 100%;
					height: 100%;
				}
				.swiper-item-img {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
					overflow: hidden;
				}
			}
		}

		.menu-box {
			display: flex;
			flex-wrap: wrap;
			padding-top: 20rpx;
			font-size: 28rpx;
			color: $xh-title-color;

			.menu-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 25%;
				margin-bottom: 30rpx;

				.menu-item-icon {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 5rpx;
				}
			}
		}

		.home-advert-box {
			margin: 20rpx 30rpx;
			height: 150rpx;
			box-sizing: border-box;
			border-radius: 75rpx;
			overflow: hidden;
			//添加一下四行css解决overflow: hidden无效的问题
			backface-visibility: hidden;
			transform: translate3d(0, 0, 0);
			-webkit-backface-visibility: hidden;
			-webkit-transform: translate3d(0, 0, 0);
			.swiper-advert {
				width: 100%;
				height: 100%;
				.swiper-advert-item-img {
					width: 100%;
					height: 100%;
					border-radius: 0rpx;
					overflow: hidden;
				}
			}
		}
	}
</style>